{$layout}
{$template "../menu"}

<first-menu style="margin-top:-1em">
	<a href="" class="item" @click.prevent="createGroup()">[创建分组]</a>
</first-menu>

<p class="comment" v-if="groups.length == 0">暂时还没有分组。</p>
<div v-show="groups.length > 0">
	<div class="margin"></div>
	<table class="ui table selectable celled" id="sortable-table">
		<thead>
			<tr>
				<th style="width:3em"></th>
				<th>分组名称</th>
				<th class="center">节点数</th>
				<th class="two op">操作</th>
			</tr>
		</thead>
		<tbody v-for="group in groups" :data-group-id="group.id">
			<tr>
				<td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
                <td><a href="" @click.prevent="updateGroup(group.id)">{{group.name}} <i class="icon expand small"></i></a></td>
				<td class="center">
					<a :href="'/clusters/cluster/nodes?clusterId=' + clusterId + '&groupId=' + group.id" v-if="group.countNodes > 0">{{group.countNodes}}</a>
					<span v-else class="disabled">0</span>
				</td>
				<td>
					<a href="" @click.prevent="updateGroup(group.id)">修改</a> &nbsp; <a href="" @click.prevent="deleteGroup(group.id)">删除</a>
				</td>
			</tr>
		</tbody>
	</table>
</div>

<p v-if="groups.length > 0" class="comment">可以拖动左侧的<i class="icon bars"></i>排序。</p>